import React, { PropTypes, Component } from 'react'

import TextField from 'material-ui/TextField';

import {List, ListItem} from 'material-ui/List';
const styles={
  slider:{
    marginTop:8,
    marginBottom:0
  },
  paddingInput:{
    width:120
  }
}

class WidgetMenuLayout extends Component {
 constructor(props, context) {
    super(props, context)

  }
 handleWidgetSetConStyle(e,attribute){

    let { widget}=this.props
    let newStyle='';
    // console.log(attribute,'change the padding value',e.which,e.target.value)
    switch (attribute){
      case 'paddingTop':
      {
          const text = e.target.value.trim();
         if (e.which === 13&&parseInt(text)==text) {
             newStyle=Object.assign({}, widget.conStyles,{ paddingTop: `${text}px` })
             this.props.widgetSetConStyle(widget.componentId,widget.positionId,newStyle)
         }
         break
      }
      case 'paddingBottom':
      {
          const text = e.target.value.trim();
         if (e.which === 13&&parseInt(text)==text) {
             newStyle=Object.assign({}, widget.conStyles,{ paddingBottom: `${text}px` })
             this.props.widgetSetConStyle(widget.componentId,widget.positionId,newStyle)
         }
         break
      }
      case 'paddingLeft':
      {
          const text = e.target.value.trim();
         if (e.which === 13&&parseInt(text)==text) {
             newStyle=Object.assign({}, widget.conStyles,{ paddingLeft: `${text}px` })
             this.props.widgetSetConStyle(widget.componentId,widget.positionId,newStyle)
         }
         break
      }
      case 'paddingRight':
      {
          const text = e.target.value.trim();
         if (e.which === 13&&parseInt(text)==text) {
             newStyle=Object.assign({}, widget.conStyles,{ paddingRight: `${text}px` })
             this.props.widgetSetConStyle(widget.componentId,widget.positionId,newStyle)
         }
         break
      }
    } 
 }
 
  render() {
    let { widget}=this.props

    return (
       <div className="menu-widget menu-widget-layout">
         <List> 
          <ListItem primaryText={`${widget.widgetName}布局`}
                    style={{height:'40px',color:'rgb(0, 188, 212)'}}
                     nestedItems={[
                     <div className="menu-widget-group" key="con-paddings">
                        <div className="menu-widget-column header">
                          挂件内边距
                        </div>
                        <div className="menu-widget-column" >
                           <span className="label" >上边距</span>
                           <span>
                              <TextField
                                id="paddingTop"
                                hintText={widget.conStyles.paddingTop}
                                style={styles.paddingInput}
                                onKeyDown={(e)=>this.handleWidgetSetConStyle(e,'paddingTop')}
                              />
                          </span>   
                        </div>
                        <div className="menu-widget-column" >
                           <span className="label" >下边距</span>
                           <span>
                              <TextField
                                id="paddingBottom"
                                
                                hintText={widget.conStyles.paddingBottom}
                                style={styles.paddingInput}
                                onKeyDown={(e)=>this.handleWidgetSetConStyle(e,'paddingBottom')}
                              />
                          </span>
                        </div>
                        <div className="menu-widget-column" >
                           <span className="label" >左边距</span>
                           <span>
                              <TextField
                                id="paddingLeft"
                                
                                hintText={widget.conStyles.paddingLeft}
                                style={styles.paddingInput}
                                onKeyDown={(e)=>this.handleWidgetSetConStyle(e,'paddingLeft')}
                              />
                          </span>

                         
                        </div>
                        <div className="menu-widget-column" >
                           <span className="label" >右边距</span>
                           <span>
                              <TextField
                                id="paddingRight"
                                
                                hintText={widget.conStyles.paddingRight}
                                style={styles.paddingInput}
                                onKeyDown={(e)=>this.handleWidgetSetConStyle(e,'paddingRight')}
                              />
                          </span>
                        </div>
                        
                     </div> ,
                     <div className="menu-widget-group" key="con-border">
                        <div className="menu-widget-column">挂件边框</div>
                        
                     </div> 
                     ]}
           /> 
          </List>         
       </div>
        
    )
  }
}

WidgetMenuLayout.propTypes = {
  widget:PropTypes.object,
  handleWidgetSetConStyle:PropTypes.func
}

export default WidgetMenuLayout
